<template>
  <view class="index-wrap">
    <view class="season">
      <view class="season-label">{{ activeSeason.name }}</view>
      <view class="select-btn">
        <u-button type="success" size="mini" @click="selectorShow = true">
          选择赛季
        </u-button>
      </view>
    </view>
    <view v-if="!activities.length" class="full-empty-wrap">
      <u-empty text="暂无活动" mode="activities" />
    </view>
    <view class="list-wrap">
      <view v-for="(item, index) in activities" :key="item._id" class="list-item" @click="go2detail(item._id, index)">
        <view class="title">{{ item.name }}</view>
        <view class="time">{{ $u.timeFrom(item.time, 'yyyy年mm月dd日') }}</view>
        <view class="delete-icon-container" @tap.stop.prevent="showDelModal(item._id)">
          <u-icon v-show="isCreator(item.creator.id)" class="delete-icon" name="close-circle"></u-icon>
        </view>
        <view class="creator">
          <img :src="item.creator.avatarUrl" />
          <view class="creator-name">{{ item.creator.nickName }}</view>
        </view>
        <view class="user-list">
          <img v-for="(_item, index) in item.users.slice(0, 5)" :key="index" :src="_item.avatarUrl" />
          <view class="user-counter">{{ item.users.length }}人参与</view>
        </view>
      </view>
    </view>
    <view class="create-btn" @click="go2Create"/>
    <u-modal v-model="delModal.show" content="确定要删除这个活动咩？" title="活动删除" show-cancel-button="true" @confirm="delActivity" :async-close="true"></u-modal>
    <u-select v-model="selectorShow" mode="single-column" :list="selectSeasons" @confirm="handleSelect"></u-select>
  </view>
</template>

<script lang="ts">
/**
 * 首页
 * @author michealZ
 */
import { Component, Mixins } from 'vue-property-decorator';
import { baseMixin, loginMixin } from '@/mixins';
import { UserInfo } from '@/types';
import { Activity } from '@/types/activity';
import { Season } from '@/types/season';

// 不能这么引入组件😑
// 编译出来的json文件路径会按照声明的路径来，就找不到了
// import { Logo } from '@/components';

export interface LabelValue {
  label: string;
  value: Season
}

@Component({
  components: {
  }
})
export default class extends Mixins(baseMixin, loginMixin) {

  public seasons: Season[] = [];

  public activeSeason: Season = {};

  public activities: Activity[] = [];

  public selectorShow = false;

  public selectSeasons: LabelValue[] = []

  public delModal = {
    show: false,
    activityId: ''
  }

  public get userInfo(): UserInfo {
    return this.$$store.userInfo;
  }

  onLoad(param: any | {}) {
    console.log('index page onload, param:', param);
  }

  private onShow() {
    wx.showLoading({ title: '别急哦...', mask: true });
    this.getSeasons();
  }

  private getSeasons(): void {
    wx.cloud.callFunction({
      name: 'get_seasons'
    }).then(({ result }) => {
      this.seasons = result as Season[];
      this.$$mutations.updateSeasons(this.seasons);
      this.selectSeasons = this.seasons.map((season) => ({
        label: season.name as string,
        value: season
      }));
      this.activeSeason = this.seasons[0];
      this.getSeasonActivities();
    });
  }

  private getSeasonActivities(): void {
    wx.showLoading({ title: '别急哦...', mask: true });
    wx.cloud.callFunction({
      name: 'get_activity_by_ids',
      data: {
        activityIds: this.activeSeason.activityIds
      }
    }).then(({ result }) => {
      this.activities = result as Activity[];
      wx.hideLoading();
    })
  }

  private go2Create() {
    this.$$mutations.updateSeason(this.activeSeason);

    wx.navigateTo({
      url: '/pages/create/index'
    });
  }

  private go2detail(id: string, index: number) {
    // todo：后续优化急速打开detail
    this.$$mutations.updateActivity(this.activities[index]);

    wx.navigateTo({
      url: '/pages/detail/index?id=' + id
    });
  }

  public showDelModal(activityId: string): void {
    this.delModal.show = true;
    this.delModal.activityId = activityId;
  }

  public delActivity(): void {
    wx.cloud.callFunction({
      name: 'delete_activity',
      data: { seasonId: this.activeSeason._id, activityId: this.delModal.activityId }
    }).then(() => {
      this.activities = this.activities.filter(({ _id }) => _id !== this.delModal.activityId);
      this.delModal.show = false;
    });
  }

  public isCreator(id: string): boolean {
    return this.userInfo.id === id;
  }

  public handleSelect(event: LabelValue[]): void {
    this.activeSeason = event[0].value;
    this.getSeasonActivities();
  }
};
</script>

<style lang='stylus' scoped>
.index-wrap
  padding 32rpx

.full-empty-wrap
  width 100%

.season
  display flex
  width 100%
  height 80rpx
  background cornflowerblue
  border-radius 4rpx
  margin-bottom 40rpx
  justify-content center
  align-items center
  color white
  .select-btn
    margin-left 20rpx

.list-item
  position relative
  margin-bottom 40rpx
  padding 30rpx 30rpx 20rpx
  border-radius 20rpx
  box-shadow 2rpx 2rpx 10rpx 3rpx #eee
  background #fff

  &:active
    box-shadow none

  .title
    font-size 36rpx
    color #333
    font-weight bold

  .time
    margin 16rpx 0 27rpx
    line-height 1
    color #999

  .creator
    display flex
    align-items center

    img
      width 40rpx
      height 40rpx
      border-radius 100rpx
      margin-right 16rpx

    .creator-name
      width 500rpx
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      color #666

  .user-list
    padding-top 20rpx
    margin-top 20rpx
    border-top 1px solid #f5f5f5
    display flex
    align-items center
    font-size 26rpx
    color #999

    img
      width 35rpx
      height 35rpx
      margin-right 8rpx
      border-radius 100rpx
      display block

  .delete-icon-container
    position absolute
    right 30rpx
    top 30rpx
    width 60rpx
    height 60rpx

  .delete-icon
    position absolute
    top 0
    right 0
    width 30rpx

.create-btn
  width 80rpx
  height 80rpx
  background url('https://636c-cloud1-5go9lhglbb5868a7-1305336427.tcb.qcloud.la/add-circle.png?sign=ce8c2002bde046cd4937ff8eb7d650ce&t=1617038860') center no-repeat
  background-size 100%
  background-color #fff
  border-radius 100rpx
  position fixed
  bottom 100rpx
  right 30rpx
  box-shadow 1rpx 1rpx 8rpx #aaa

  &:active
    box-shadow none

</style>
